<template>
  <div class="home-page">
    <!-- 添加通用页头，并在右侧放置添加按钮 -->
    <PageHeader title="人生时间线" :showLeftButton="false">
      <template #right>
        <el-button type="primary" @click="addEvent">
          新增
        </el-button>
      </template>
    </PageHeader>
    <div class="content">
      <PullRefresh @refresh="onRefresh">
        <div class="timeline">
          <div v-for="event in events" :key="event.id" class="timeline-item">
            <div class="timeline-dot"></div>
            <div class="timeline-content" @click="viewDetail(event.id)">
              <h3>{{ event.title }}</h3>
              <p>{{ event.date }}</p>
              <p>{{ event.description }}</p>
            </div>
          </div>
        </div>
      </PullRefresh>
    </div>
  </div>
</template>

<script>
import { Plus } from '@element-plus/icons-vue'
import PageHeader from '../components/PageHeader.vue'
import PullRefresh from '../components/PullRefresh.vue'
import { getAllEvents } from '../services/api.js'

export default {
  name: 'HomePage',
  components: {
    Plus,
    PageHeader,
    PullRefresh
  },
  data() {
    return {
      events: [],
      loading: false
    }
  },
  async created() {
    // 组件创建时获取事件数据
    await this.fetchEvents()
  },
  async mounted() {
    // 组件挂载后再次确保数据加载完成
    if (this.events.length === 0) {
      await this.fetchEvents()
    }
  },
  methods: {
    async fetchEvents() {
      this.loading = true
      try {
        const data = await getAllEvents()
        // 确保数据格式正确，按日期排序
        this.events = data.sort((a, b) => new Date(b.date) - new Date(a.date))
      } catch (error) {
        console.error('加载事件失败:', error)
        this.$message.error('加载事件失败，请稍后重试')
      } finally {
        this.loading = false
      }
    },
    addEvent() {
      this.$router.push('/add-event-type')
    },
    viewDetail(id) {
      this.$router.push(`/event-detail/${id}`)
    },
    // 下拉刷新回调
    async onRefresh() {
      await this.fetchEvents()
    }
  }
}
</script>

<style scoped>
.home-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.content {
  flex: 1;
  width: 100%;
  height: calc(100vh - 60px); /* 假设页头高度为60px */
  overflow: hidden;
}

.content h2 {
  text-align: center;
  margin-bottom: 2rem;
  color: #333;
}

.timeline {
  position: relative;
  width: 100%;
  margin: 0 auto;
  /* 确保时间线内容不会被下拉刷新提示遮挡 */
  padding-top: 1rem;
}

/* 时间线内容需要有内边距 */
.timeline {
  padding: 1rem;
  padding-bottom: 80px; /* 为底部按钮留出空间 */
}

.refresh-indicator {
  margin-right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.refresh-text {
  color: #606266;
  font-size: 14px;
}

.refreshing .refresh-indicator .el-icon {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 20px;
  width: 2px;
  background: #e0e0e0;
}

.timeline-item {
  position: relative;
  padding-left: 50px;
  margin-bottom: 2rem;
}

.timeline-dot {
  position: absolute;
  left: 14px;
  top: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #409eff;
  border: 3px solid white;
}

.timeline-content {
  background: white;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s;
}

.timeline-content:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.timeline-content h3 {
  margin: 0 0 0.5rem 0;
  color: #333;
}

.timeline-content p {
  margin: 0.25rem 0;
  color: #666;
}

.add-button {
  position: fixed;
  bottom: 100px;
  right: 2rem;
  width: 60px;
  height: 60px;
  font-size: 24px;
}
</style>